<template>
  <div class="menubox">
    <div class="NavbarTop">
      <img src="http://47.94.137.36:8080/images/xh829.png" alt="" />
      <b>科技OA协同办公系统</b>
    </div>
    <div class="NavbarMenu" >
      <ul v-for="item in menu" :key="item.name" @click="menuclikc(item.name)">
        <li v-if="item.icon" >
          <img :src="item.icon" alt="" />
          {{ item.name }}
        </li>
        <li v-else>
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="NavbarRight">
      <!-- 用户信息 待更改 -->
      <p class="usericon">
        <img src="@/assets/menu/phone.png" alt="" />
        手机版
      </p>
      <p class="usericon">
        <img src="@/assets/menu/chat.png" alt="" />
        即时通讯
      </p>
      <p class="menuuser">
        <img src="@/assets/menu/user.png" alt="" class="userurl" />
        管理员
        <img src="@/assets/menu/xb.png" alt="" class="userxb" />
      </p>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import {useCounterStore} from "@/stores/counter"
const menu = ref([
  {
    name: "个人办公",
    path: "/",
    icon: "../src/assets/menu/job.png",
 
  },
  {
    name: "流程",
    path: "/department",
  },
  {
    name: "资源",
    path: "/employee",
  },
  {
    name: "任务",
    path: "/attendance",
  },
  {
    name: "公文",
    path: "/leave",
  },
  {
    name: "客户",
    path: "/overtime",
  },
  {
    name: "人事考勤",
    path: "/reimburse",
  },
  {
    name: "行政",
    path: "/approval",
  },
  {
    name: "流程模块",
    path: "/approval",
  },
  {
    name: "系统",
    path: "/approval",
    icon: "../src/assets/menu/setting.png",
  },
]);
const store = useCounterStore()
const menuclikc = (item: any) => {
  store.menuclick(item)  
};
</script>
<style scoped lang="scss">
.menubox {
  background-color: red;
  color: #fff;
  display: flex;
  height: auto;
  justify-content: space-between;
  .NavbarTop {
    display: flex;
    height: 5rem;
    align-items: center;
    flex-wrap: nowrap;
    width: 24.6rem;
    img {
      width: 3.4rem;
      height: 3.4rem;
      padding: 0 1rem;
    }
    b {
      font-weight: 700;
      font-size: 1.8rem;
      padding: 0 2rem 0 0;
    }
  }

  .NavbarMenu {
    display: flex;
    justify-content: space-around;

    ul {
      list-style: none;
      line-height: 5rem;
      :hover {
        background-color: rgba(0, 0, 0, 0.2);
      }
      li {
        font-size: 1.4rem;
        display: flex;
        align-items: center;
        // border: .1rem solid #000;
        margin: 0;
        padding: 0 1.5rem;

        cursor: pointer;
        img {
          width: 1.5rem;
          height: 1.44rem;
        }
      }
    }
  }
  .NavbarRight {
    display: flex;
    align-items: center;
    cursor: pointer;
    :hover {
      background-color: rgba(0, 0, 0, 0.2);
    }
    .usericon {
      font-size: 1.4rem;
      padding: 0 1.5rem;
      display: flex;
      padding: 0 1.5rem;
      line-height: 5rem;
      align-items: center;

      img {
        width: 1.4rem;
        height: 1.4rem;
      }
    }
    .menuuser {
      font-size: 1.4rem;
      padding: 0 1.5rem;
      display: flex;
      align-items: center;
      line-height: 5rem;
      .userurl {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        margin-right: 1rem;
      }
      .userxb {
        width: 1.4rem;
        height: 1.4rem;
      }
    }
  }
}
</style>
